博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片...
阅读量:5256 次
发布时间:2019-06-14

本文共 909 字,大约阅读时间需要 3 分钟。

业务需求:

3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 

index.wxml:

这里使用小程序提供的<swiper>组件

autoplay:自动播放
interval:自动切换时间
duration:滑动动画的时长
current:当前所在的页面
bindchange:current 改变时会触发 change 事件
由于<swiper>组件提供的指示点样式比较单一,另外再自定义指示点的样式

 

index.wxml :

{
{index+1}}

 

index.js:

data: {    swiperCurrent: 0  },    //轮播图的切换事件    swiperChange: function (e) {     console.log(e);     this.setData({      swiperCurrent: e.detail.current   //获取当前轮播图片的下标    })  },  //点击指示点切换    chuangEvent: function (e) {    this.setData({      swiperCurrent: e.currentTarget.id    })  },//获取图片在onload就可以进行。

 

运行:

 

转载于:https://www.cnblogs.com/xuzhengzong/p/8056262.html

你可能感兴趣的文章
在android开发中添加外挂字体
查看>>
Zerver是一个C#开发的Nginx+PHP+Mysql+memcached+redis绿色集成开发环境
查看>>
多线程实现资源共享的问题学习与总结
查看>>
java实现哈弗曼树
查看>>
转:Web 测试的创作与调试技术
查看>>
python学习笔记3-列表
查看>>
程序的静态链接,动态链接和装载 (补充)
查看>>
关于本博客说明
查看>>
线程androidAndroid ConditionVariable的用法
查看>>
转载:ASP.NET Core 在 JSON 文件中配置依赖注入
查看>>
socket初识
查看>>
磁盘测试工具
查看>>
代码变量、函数命名神奇网站
查看>>
redis cli命令
查看>>
Problem B: 占点游戏
查看>>
python常用模块之sys, os, random
查看>>
HDU 2548 A strange lift
查看>>
Linux服务器在外地,如何用eclipse连接hdfs
查看>>
react双组件传值和传参
查看>>
[Kaggle] Sentiment Analysis on Movie Reviews
查看>>